<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城后台管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/css/index.css">
</head>

<body>
    <div id="app">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <div class="logo">
                <h1><i class="fas fa-shopping-bag"></i> <span>商城后台管理</span></h1>
            </div>
            <ul class="nav-links">
                <li><a href="#" class="active"><i class="fas fa-home"></i> <span>首页概览</span></a></li>
                <li><a href="productManagement.html"><i class="fas fa-shopping-cart"></i> <span>商品管理</span></a></li>
                <li><a href="#"><i class="fas fa-list"></i> <span>订单管理</span></a></li>
                <li><a href="#"><i class="fas fa-users"></i> <span>用户管理</span></a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i> <span>销售分析</span></a></li>
                <li><a href="#"><i class="fas fa-cog"></i> <span>系统设置</span></a></li>
            </ul>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航 -->
            <div class="topbar">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索..." v-model="searchQuery">
                </div>
                <div class="user-actions">
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">{{ notificationCount }}</span>
                    </div>
                    <div class="user-profile">
                        <img :src="user.avatar" :alt="user.name">
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card daily">
                    <div class="stat-header">
                        <div class="stat-title">日销售额</div>
                        <div class="stat-icon daily">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                    </div>
                    <div class="stat-value">¥{{ dailySales.toLocaleString() }}</div>
                    <div class="stat-change" :class="dailyChange >= 0 ? 'positive' : 'negative'" v-if="hasDayData">
                        <i :class="dailyChange >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                        <span>{{ Math.abs(dailyChange) }}% 较昨日</span>
                    </div>
                    <div v-else class="no-data red-text">暂无对比数据</div>
                </div>

                <div class="stat-card monthly">
                    <div class="stat-header">
                        <div class="stat-title">月销售额</div>
                        <div class="stat-icon monthly">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                    <div class="stat-value">¥{{ monthlySales.toLocaleString() }}</div>
                    <div class="stat-change" :class="monthlyChange >= 0 ? 'positive' : 'negative'" v-if="hasMonthData">
                        <i :class="monthlyChange >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                        <span>{{ Math.abs(monthlyChange) }}% 较上月</span>
                    </div>
                    <div v-else class="no-data red-text">暂无对比数据</div>

                </div>

                <div class="stat-card total">
                    <div class="stat-header">
                        <div class="stat-title">年销售额</div>
                        <div class="stat-icon total">
                            <i class="fas fa-wallet"></i>
                        </div>
                    </div>
                    <div class="stat-value">¥{{ totalSales.toLocaleString() }}</div>
                    <div class="stat-change" :class="totalChange >= 0 ? 'positive' : 'negative'" v-if="hasYearData">
                        <i :class="totalChange >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                        <span>{{ Math.abs(totalChange) }}% 同比增长</span>
                    </div>
                    <div v-else class="no-data red-text">暂无对比数据</div>

                </div>

                <div class="stat-card users">
                    <div class="stat-header">
                        <div class="stat-title">用户数量</div>
                        <div class="stat-icon users">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                    <div class="stat-value">{{ userCount.toLocaleString() }}</div>

                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-container">
                <div class="chart-card">
                    <div class="chart-header">
                        <div class="chart-title">销售趋势分析</div>
                        <div class="chart-actions">
                            <button @click="changeChartRange('month')"
                                :class="chartRange === 'month' ? 'active' : ''">月</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="salesChart"></canvas>
                        <div class="loading-overlay" v-if="loadingSales">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                </div>

                <div class="chart-card">
                    <div class="chart-header">
                        <div class="chart-title">用户构成</div>
                    </div>
                    <div class="chart-container">
                        <canvas id="usersChart"></canvas>
                        <div class="loading-overlay" v-if="loadingUsers">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="refresh-btn" @click="fetchData">
                <i class="fas fa-sync-alt"></i> 刷新数据
            </button>
        </div>
    </div>

    <script src="/js/index.js"></script>
</body>

</html>